<template>
    <div class="GPLOT-Tool">
        <Tooltip content="选择工具" placement="right">
            <div class="GPLOT-Tool-Item Select" :class="{'Active' : active == 'Select'}" @click="setStatus('Select')"></div>
        </Tooltip>
        <!-- <Tooltip content="复制工具" placement="right">
            <div class="GPLOT-Tool-Item Copy" :class="{'Active' : active == 'Copy'}" @click="setStatus('Copy')"></div>
        </Tooltip> -->

        <div class="GPLOT-Tool-cutoff"></div>

        <Tooltip content="矩形绘制工具" placement="right">
            <div class="GPLOT-Tool-Item Rectangle" :class="{'Active' : active == 'Rectangle'}" @click="setStatus('Rectangle')"></div>
        </Tooltip>
        <Tooltip content="圆形绘制工具" placement="right">
            <div class="GPLOT-Tool-Item Circle" :class="{'Active' : active == 'Circle'}" @click="setStatus('Circle')"></div>
        </Tooltip>
        <Tooltip content="文字工具" placement="right">
            <div class="GPLOT-Tool-Item Text" :class="{'Active' : active == 'Text'}" @click="setStatus('Text')"></div>
        </Tooltip>

        <div class="GPLOT-Tool-cutoff"></div>

        <Tooltip content="图标绘制工具" placement="right">
            <div class="GPLOT-Tool-Item Image" :class="{'Active' : active == 'Image'}" @click="setStatus('Image')"></div>
        </Tooltip>
        <Tooltip content="链接图标工具" placement="right">
            <div class="GPLOT-Tool-Item Link" :class="{'Active' : active == 'Link'}" @click="setStatus('Link')"></div>
        </Tooltip>
    </div>
</template>

<script>
import { mapState } from "vuex";

export default {
    computed: {
        ...mapState("layout", {
            active: state => state.tools.active,
        }),
    },
    methods: {
        setStatus(type) {
            this.$store.commit('layout/setToolActive', type);
        },
    }
}
</script>